<template>
  <div>
    <!-- 头部开始 -->
    <div class="head">
            <header class="header-table">
                <el-table
            :data="tableData"
            style="width: 100%"  >
            <el-table-column
                prop="offline"
                label="线下销售金额"
                width="180">
            </el-table-column>
            <el-table-column
                prop="offline_count"
                label="线下销售数量"
                width="180">
            </el-table-column>
            <el-table-column
                prop="online_money"
                label="线上销售金额">
            </el-table-column>
            <el-table-column
                prop="online_count"
                label="线上销售数量">
            </el-table-column>
            </el-table>
    </header>
    <!--    抬头表格结束 -->
    <div class="navBar">
        <span class="serch-name">姓名：</span><el-input v-model="input1" placeholder="姓名查询"></el-input>
        <span class="serch-name">单位：</span><el-input v-model="inputPlace" placeholder="单位查询"></el-input>
         
            <span class="demonstration">订单日期</span>
            <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
  
        <el-button type="primary" icon="el-icon-search">查询</el-button> 
        <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
    </div>
    <!-- 查询框结束 -->
    <div class="head-type">
        <div class="agency-type">
            <div class="type-name">
                类型
            </div>
             
         <el-radio-group v-model="radio">
    <el-radio :label="3">全部</el-radio>
    <el-radio :label="6">合伙人</el-radio>
    <el-radio :label="9">大客户</el-radio>
  </el-radio-group>
        </div>
        <!-- 合伙人类型结束 -->
         <div class="agency-type card-type">
            <div class="type-name">
                卡类型
            </div>
             
         <el-radio-group v-model="radio1">
    <el-radio :label="3">全部</el-radio>
    <el-radio :label="6">虚拟卡</el-radio>
    <el-radio :label="9">实体卡</el-radio>
  </el-radio-group>
        </div>
        <!-- 卡类型结束 -->
        <div class="exports">
              <el-button type="primary">导出到excel</el-button>
        </div>
    </div>
    <!-- 2个类型单选结束 -->
    </div>
    <!-- 头部结束 -->

    <!-- 列表开始 -->
    <div class="orderList">
        <el-table
    :data="tableData1"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="order_num"
      label="订单编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="order_count"
      label="订单数量"
      width="60">
    </el-table-column>
    <el-table-column
      prop="client_name"
      label="名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="client_compa"
      label="单位"
      width="120">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="创建时间"
      width="300">
    </el-table-column>
    <el-table-column
      prop="product"
      label="产品名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="singlePrice"
      label="单价"
      width="60">
    </el-table-column>
     <el-table-column
      prop="totalPrice"
      label="支付金额"
      width="60">
    </el-table-column>
     <el-table-column
      prop="payTime"
      label="支付时间"
      width="150">
    </el-table-column>
     <el-table-column
      prop="payStatus"
      label="支付状态"
      width="60">
    </el-table-column>
     <el-table-column
      prop="cardType"
      label="卡类"
      width="60">
    </el-table-column>
     <el-table-column
      prop="clienttype"
      label="类型"
      width="60">
    </el-table-column>
    <!-- <el-table-column class="actions"
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column> -->
  </el-table>
    </div>
    <!-- 列表结束 -->
    
    <!-- 分页器 开始 -->
    <div class="pagatations">
      <!-- <el-pagination
      background
      layout="prev, pager, next"
      :total="1000">
</el-pagination> -->

       <div class="block"> 
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>
  </div>
    </div>
    
  </div>
</template>

<script>
export default {
   name:"OrderList",
        methods: {
            handleClick(row) {
                console.log(row);
            },
             handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
            handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
        data(){
             return {
                 input1:'',
                 inputPlace:'',
                 radio: 3,
                 radio1:3,
                  tableData: [{
                    offline: 0,
                    offline_count: 0,
                    online_money: 2.65,
                    online_count:256

          }],
            currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: '',
        tableData1: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      };
    }
};
</script>

<style>
  *{
    margin: 0;
    padding: 0;
}

.head{
    max-width: 896px;
    margin: 0 auto;
    overflow: hidden;
    
}

    .header-table{
        margin-bottom: 40px;
    }


    .navBar{
        display: flex;
        flex-wrap: nowrap;
       margin-bottom: 40px;
        
    }

    .serch-name{
        text-align: left;
    }

    .el-input{
            width: 200px;
        }

    

    .demonstration{
            margin-left: 20px;
            width: 100px;
            line-height: 40px;
        }

    
    .el-date-picker{
        width: 275px;
        margin-right: 40px;
    }
    .el-button{
        margin-left: 20px;
        background-color: transparent;
        color: black;
        border: 1px solid lightgray;
    }

    .head-type{
        display: flex;
        flex-wrap: nowrap;
    }

    .agency-type{
        display: flex;
        flex-wrap: nowrap;
        width: 100px;
        margin-bottom: 40px;
    }

    .card-type{
        margin-left: 170px;
    }
    
    .type-name{
        width: 50%;
    }

    .el-radio-group{
        width: 20%;
        text-align: left;
    }
     
   

    .el-table .cell{
         text-align: center;
    }

    

</style>